/*
 * 基于iview的富文本编辑组件
 * @Author: ljb 
 * @Date: 2018-01-27 08:34:26 
 * @Last Modified by: ljb
 * @Last Modified time: 2018-02-25 18:05:40
 */
<style scoped>

    .editor {
        max-width: 800px;
        text-align: left;
    }

</style>
<template>
<div>
    <div :class="className" class="editor"></div>
    <Button type="success" @click="preViewResult" v-if="previewWidth">预览</Button>
</div>
</template>

<script>

import { mapGetters , mapMutations } from "vuex";

import E from 'wangeditor';

export default {
    name: 'editor',
    props: ['requestUrl','openUploadImg','className','preData','previewWidth'],
    data() {
        return {
            editor : null
        }
    },
    mounted () {
        
        this.$nextTick(this.initEditor);

    },
    watch : {

        'preData' : function(){

            if( !this.preData || !this.editor )return;

            this.editor.txt.html(this.preData);

        }

    },
    methods: {

        ...mapMutations('spinShow',[
            'showSpin',
            'closeSpin'
        ]),

        /**
         * 预览富文本编辑器的内容
         * @return {undefined}
         */
        preViewResult(){

            const config = {
                title : '预览内容',
                render: (h) => {
                    return h('div', {
                        domProps: {
                            innerHTML: this.editor.txt.html()
                        }
                    })
                },
                width : this.previewWidth
            }

            this.$Modal.info(config);

        },

        /**
         * 清空富文本编辑器的内容
         * @return {undefined}
         */
        clearContent(){

            this.editor.txt.clear();

        },

        /**
         * 初始化编辑器
         * @return {undefined}
         */
        initEditor(){

            const self = this;

            const class_name = '.' + this.className;

            this.editor = new E(class_name);

            this.editor.customConfig.onchange = (html) => {
                self.$emit('change',html);
            }

            this.editor.customConfig.customAlert = function (info) {
                // info 是需要提示的内容
                self.$Message.error(info);
            }

            if( this.openUploadImg ) {

                this.uploadImgConfig();

            }

            this.editor.create();

        },

        /**
         * 配置上传图片至服务器
         * @return {undefined}
         */
        uploadImgConfig(){

            const self = this;

            this.editor.customConfig.customUploadImg = function (files, insert) {

                self.showSpin('上传中');
                
                self.$http.post( self.requestUrl , self.formatData(files) )
                    .then(({ data })=>{
                                
                        if( parseInt(data.code) !== 0 )throw new Error(data.error);

                        const res_urls = data.urls;

                        res_urls.forEach((url) => {
                            insert(url);
                        })

                    })
                    .catch((err)=>{
                        
                        self.$Message.error(err.message || err.statusText);

                    })
                    .then(self.closeSpin)

            }

        },

        /**
         * 组建form表单
         * @param  {Object} files {文件对象}
         * @return {Object} {格式化好的formdata对象}
         */
        formatData(files){

            let form_data = new FormData();

            files.forEach((file,index) => {
                form_data.append( 'images[' + index + ']' , file );
            })

            return form_data;

        }

    },
}
</script>